<template>
	<view class="verification-container">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- Logo区域 -->
			<view class="logo-section">
				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 手机号显示 -->
				<view class="form-item">
					<u--input
						v-model="formData.phone"
						placeholder=""
						border="none"
						:disabled="false"
						class="phone-input"
					></u--input>
				</view>
				
				<!-- 验证码输入 -->
				<view class="form-item">
					<view class="input-wrapper">
						<u--input
							v-model="formData.verificationCode"
							placeholder="请输入验证码"
							border="none"
							type="number"
							maxlength="6"
							class="code-input"
							@input="onVerificationCodeInput"
						></u--input>
						<text 
							class="get-code-btn" 
							:class="{ 'disabled': countdown > 0 }"
							@click="getVerificationCode"
						>
							{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
						</text>
					</view>
				</view>
			</view>
			
			<!-- 提示信息 -->
			<view class="tips-container" v-if="showTips">
				<view class="tip-item" v-if="formData.verificationCode.length > 0 && formData.verificationCode.length < 6">
					<u-icon name="info-circle" size="24" color="#ff9500"></u-icon>
					<text class="tip-text">请输入6位验证码</text>
				</view>
				<view class="tip-item" v-if="formData.verificationCode.length === 6">
					<u-icon name="checkmark-circle" size="24" color="#00d4aa"></u-icon>
					<text class="tip-text">验证码格式正确</text>
				</view>
			</view>
			
			<!-- 下一步按钮 -->
			<view class="button-container">
				<u-button
					type="primary"
					text="下一步"
					:disabled="!isFormValid"
					@click="handleNext"
					class="next-btn"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					phone: '185****5496', // 预填充的手机号
					verificationCode: ''
				},
				countdown: 0,
				timer: null,
				showTips: false
			}
		},
		computed: {
			isFormValid() {
				return this.formData.verificationCode.length === 6;
			}
		},
		methods: {
			// 获取验证码
			getVerificationCode() {
				if (this.countdown > 0) return;
				
				// 开始倒计时
				this.countdown = 60;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
					}
				}, 1000);
				
				// 模拟发送验证码
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
			},
			
			// 验证码输入处理
			onVerificationCodeInput(value) {
				// 只允许输入数字
				this.formData.verificationCode = value.replace(/\D/g, '');
				this.showTips = true;
			},
			
			// 下一步处理
			handleNext() {
				if (!this.isFormValid) {
					uni.showToast({
						title: '请输入完整的验证码',
						icon: 'none'
					});
					return;
				}
				
				// 验证验证码格式
				if (!/^\d{6}$/.test(this.formData.verificationCode)) {
					uni.showToast({
						title: '验证码必须为6位数字',
						icon: 'none'
					});
					return;
				}
				
				// 模拟验证
				uni.showLoading({
					title: '验证中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '验证成功',
						icon: 'success'
					});
					
					// 跳转到修改密码页面
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/change-password/change-password'
						});
					}, 1500);
				}, 2000);
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['帮助', '联系客服', '关于我们'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
			}
		},
		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style lang="scss" scoped>
.verification-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.content {
		padding: 20rpx;
		
		.logo-section {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 60rpx 0;
			
			.logo {
				width: 120rpx;
				height: 120rpx;
			}
		}
		
		.form-container {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.form-item {
				margin-bottom: 40rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.phone-input {
					border-bottom: 1rpx solid #e5e5e5;
					padding-bottom: 20rpx;
					font-size: 28rpx;
					color: #999;
				}
				
				.input-wrapper {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #e5e5e5;
					padding-bottom: 20rpx;
					
					.code-input {
						flex: 1;
						font-size: 28rpx;
					}
					
					.get-code-btn {
						color: #ff4757;
						font-size: 26rpx;
						padding-left: 20rpx;
						
						&:active {
							opacity: 0.7;
						}
						
						&.disabled {
							color: #999;
						}
					}
				}
			}
		}
		
		.tips-container {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 40rpx;
			
			.tip-item {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.tip-text {
					font-size: 24rpx;
					margin-left: 10rpx;
					color: #666;
				}
			}
		}
		
		.button-container {
			padding: 0 20rpx;
			
			.next-btn {
				width: 100%;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				background: linear-gradient(135deg, #ff4757, #ff3742);
				border: none;
				
				&:disabled {
					background: #ccc;
				}
			}
		}
	}
}
</style> 